
<template>
  <div id="changeContab">
    <el-button class="language"
               type="text"
               @click="i18n=(i18n==='en'?'cn':'en')">{{i18n}}</el-button>
    <div style="width:100%">{{showCRONDescription(cron)}}</div>
    <el-collapse v-model="activeNames"
                 style="width:677px;height:700px;overflow:auto">
      <!-- <el-collapse-item title="Seconds" name="1">
            <span slot="label"><i class="el-icon-date"></i> {{text.Seconds.name}}</span>
                <div class="tabBody">
                    <el-row>
                        <el-radio v-model="second.cronEvery" @change="changeHander" label="1">{{text.Seconds.every}}</el-radio>
                    </el-row>
                    <el-row>
                        <el-radio v-model="second.cronEvery"  @change="changeHander" label="2">{{text.Seconds.interval[0]}}
                            <el-input-number size="small" v-model="second.incrementIncrement" :min="1" :max="60"></el-input-number>
                            {{text.Seconds.interval[1]||''}}
                            <el-input-number size="small" v-model="second.incrementStart" :min="0" :max="59"></el-input-number>
                            {{text.Seconds.interval[2]||''}}
                        </el-radio>
                    </el-row>
                    <el-row>
                        <el-radio  @change="changeHander" class="long" v-model="second.cronEvery" label="3">{{text.Seconds.specific}}
                            <el-select size="small" multiple v-model="second.specificSpecific">
                                <el-option v-for="val in 60" :key="$index" :value="val-1">{{val-1}}</el-option>
                            </el-select>
                        </el-radio>
                    </el-row>
                    <el-row>
                        <el-radio @change="changeHander" v-model="second.cronEvery" label="4">{{text.Seconds.cycle[0]}}
                            <el-input-number size="small" v-model="second.rangeStart" :min="1" :max="60"></el-input-number>
                            {{text.Seconds.cycle[1]||''}}
                            <el-input-number size="small" v-model="second.rangeEnd" :min="0" :max="59"></el-input-number>
                            {{text.Seconds.cycle[2]||''}}
                        </el-radio>
                    </el-row>
                </div>
          </el-collapse-item> -->
      <el-collapse-item name="2">
        <template slot="title">
          <div style="display:flex;justify-content:space-between;width:90%">
            <div>Minutes</div>
            <div>{{MinutesHander(minute.cronEvery)}}</div>
          </div>
        </template>
        <span slot="label"><i class="el-icon-date"></i> {{text.Minutes.name}}</span>
        <div class="tabBody">
          <el-row v-if="model !== 'snapshot'">
            <el-radio @change="changeHander"
                      v-model="minute.cronEvery"
                      label="1">{{text.Minutes.every}}</el-radio>
          </el-row>
          <el-row v-if="model !== 'snapshot'">
            <el-radio @change="changeHander"
                      v-model="minute.cronEvery"
                      label="2">{{text.Minutes.interval[0]}}
              <el-input-number size="small"
                               v-model="minute.incrementIncrement"
                               :min="1"
                               :max="60"></el-input-number>
              {{text.Minutes.interval[1]}}
              <el-input-number size="small"
                               v-model="minute.incrementStart"
                               :min="0"
                               :max="59"></el-input-number>
              {{text.Minutes.interval[2]||''}}
            </el-radio>
          </el-row>
          <el-row >
            <el-radio @change="changeHander"
                      class="long"
                      :key="keys"
                       v-model="minute.cronEvery"
                      label="3">{{text.Minutes.specific}}
              <el-select size="small"
                         multiple
                         v-model="minute.specificSpecific">
                <template v-if="shareDashboard==='shareDashboard'">
                  <el-option v-for="(val,index) in [0,10,20,30,40,50]"
                           :key="index"
                           :value="val">{{val}}</el-option>
                </template>
                <template v-else>
                  <el-option v-for="(val,index) in 60"
                           :key="index"
                           :value="val-1">{{val-1}}</el-option>
                </template>
              </el-select>
            </el-radio>
          </el-row>
          <el-row v-if="model !== 'snapshot'">
            <el-radio @change="changeHander"
                      v-model="minute.cronEvery"
                      label="4">{{text.Minutes.cycle[0]}}
              <el-input-number size="small"
                               v-model="minute.rangeStart"
                               :min="1"
                               :max="60"></el-input-number>
              {{text.Minutes.cycle[1]}}
              <el-input-number size="small"
                               v-model="minute.rangeEnd"
                               :min="0"
                               :max="59"></el-input-number>
              {{text.Minutes.cycle[2]}}
            </el-radio>
          </el-row>
        </div>
      </el-collapse-item>
      <el-collapse-item name="3">
        <template slot="title">
          <div style="display:flex;justify-content:space-between;width:90%">
            <div>Hours</div>
            <div>{{HoursHander(hour.cronEvery)}}</div>
          </div>
        </template>
        <span slot="label"><i class="el-icon-date"></i> {{text.Hours.name}}</span>
        <div class="tabBody">
          <el-row>
            <el-radio @change="changeHander"
                      v-model="hour.cronEvery"
                      label="1">{{text.Hours.every}}</el-radio>
          </el-row>
          <el-row>
            <el-radio @change="changeHander"
                      v-model="hour.cronEvery"
                      label="2">{{text.Hours.interval[0]}}
              <el-input-number size="small"
                               v-model="hour.incrementIncrement"
                               :min="0"
                               :max="23"></el-input-number>
              {{text.Hours.interval[1]}}
              <el-input-number size="small"
                               v-model="hour.incrementStart"
                               :min="0"
                               :max="23"></el-input-number>
              {{text.Hours.interval[2]}}
            </el-radio>
          </el-row>
          <el-row>
            <el-radio @change="changeHander"
                      class="long"
                      v-model="hour.cronEvery"
                      label="3">{{text.Hours.specific}}
              <el-select size="small"
                         multiple
                         v-model="hour.specificSpecific">
                <el-option v-for="(val,index) in 24"
                           :key="index"
                           :value="val-1">{{val-1}}</el-option>
              </el-select>
            </el-radio>
          </el-row>
          <el-row>
            <el-radio @change="changeHander"
                      v-model="hour.cronEvery"
                      label="4">{{text.Hours.cycle[0]}}
              <el-input-number size="small"
                               v-model="hour.rangeStart"
                               :min="0"
                               :max="23"></el-input-number>
              {{text.Hours.cycle[1]}}
              <el-input-number size="small"
                               v-model="hour.rangeEnd"
                               :min="0"
                               :max="23"></el-input-number>
              {{text.Hours.cycle[2]}}
            </el-radio>
          </el-row>
        </div>
      </el-collapse-item>
      <el-collapse-item name="4">
        <template slot="title">
          <div style="display:flex;justify-content:space-between;width:90%">
            <div>Day</div>
            <div>{{dayHander(day.cronEvery)}}</div>
          </div>
        </template>
        <span slot="label"><i class="el-icon-date"></i> {{text.Day.name}}</span>
        <div class="tabBody">
          <el-row>
            <el-radio @change="changeHander"
                      v-model="day.cronEvery"
                      label="1">{{text.Day.every}}</el-radio>
          </el-row>
          <el-row>
            <el-radio @change="changeHander"
                      v-model="day.cronEvery"
                      label="2">{{text.Day.intervalWeek[0]}}
              <el-input-number size="small"
                               v-model="week.incrementIncrement"
                               :min="1"
                               :max="7"></el-input-number>
              {{text.Day.intervalWeek[1]}}
              <el-select size="small"
                         v-model="week.incrementStart">
                <el-option v-for="(val,index) in 7"
                           :key="index"
                           :label="text.Week[val-1]"
                           :value="val"></el-option>
              </el-select>
              {{text.Day.intervalWeek[2]}}
            </el-radio>
          </el-row>
          <el-row>
            <el-radio @change="changeHander"
                      v-model="day.cronEvery"
                      label="3">{{text.Day.intervalDay[0]}}
              <el-input-number size="small"
                               v-model="day.incrementIncrement"
                               :min="1"
                               :max="31"></el-input-number>
              {{text.Day.intervalDay[1]}}
              <el-input-number size="small"
                               v-model="day.incrementStart"
                               :min="1"
                               :max="31"></el-input-number>
              {{text.Day.intervalDay[2]}}
            </el-radio>
          </el-row>
          <el-row>
            <el-radio @change="changeHander"
                      class="long"
                      v-model="day.cronEvery"
                      label="4">{{text.Day.specificWeek}}
              <el-select size="small"
                         multiple
                         v-model="week.specificSpecific">
                <el-option v-for="(val,index) in 7"
                           :key="index"
                           :label="text.Week[val-1]"
                           :value="['SUN','MON','TUE','WED','THU','FRI','SAT'][val-1]"></el-option>
              </el-select>
            </el-radio>
          </el-row>
          <el-row>
            <el-radio @change="changeHander"
                      class="long"
                      v-model="day.cronEvery"
                      label="5">{{text.Day.specificDay}}
              <el-select size="small"
                         multiple
                         v-model="day.specificSpecific">
                <el-option v-for="(val,index) in 31"
                           :key="index"
                           :value="val">{{val}}</el-option>
              </el-select>
            </el-radio>
          </el-row>
          <el-row>
            <el-radio @change="changeHander"
                      v-model="day.cronEvery"
                      label="6">{{text.Day.lastDay}}</el-radio>
          </el-row>
          <el-row>
            <el-radio @change="changeHander"
                      v-model="day.cronEvery"
                      label="7">{{text.Day.lastWeekday}}</el-radio>
          </el-row>
          <el-row>
            <el-radio @change="changeHander"
                      v-model="day.cronEvery"
                      label="8">{{text.Day.lastWeek[0]}}
              <el-select size="small"
                         v-model="day.cronLastSpecificDomDay">
                <el-option v-for="(val,index) in 7"
                           :key="index"
                           :label="text.Week[val-1]"
                           :value="val"></el-option>
              </el-select>
              {{text.Day.lastWeek[1]||''}}
            </el-radio>
          </el-row>
          <el-row>
            <el-radio @change="changeHander"
                      v-model="day.cronEvery"
                      label="9">
              <el-input-number size="small"
                               v-model="day.cronDaysBeforeEomMinus"
                               :min="1"
                               :max="31"></el-input-number>
              {{text.Day.beforeEndMonth[0]}}
            </el-radio>
          </el-row>
          <el-row>
            <el-radio @change="changeHander"
                      v-model="day.cronEvery"
                      label="10">{{text.Day.nearestWeekday[0]}}
              <el-input-number size="small"
                               v-model="day.cronDaysNearestWeekday"
                               :min="1"
                               :max="31"></el-input-number>
              {{text.Day.nearestWeekday[1]}}
            </el-radio>
          </el-row>
          <el-row>
            <el-radio @change="changeHander"
                      v-model="day.cronEvery"
                      label="11">{{text.Day.someWeekday[0]}}
              <el-input-number size="small"
                               v-model="week.cronNthDayNth"
                               :min="1"
                               :max="5"></el-input-number>
              <el-select size="small"
                         v-model="week.cronNthDayDay">
                <el-option v-for="(val,index) in 7"
                           :key="index"
                           :label="text.Week[val-1]"
                           :value="val"></el-option>
              </el-select>
              {{text.Day.someWeekday[1]}}
            </el-radio>
          </el-row>
        </div>
      </el-collapse-item>
      <el-collapse-item name="5">
        <template slot="title">
          <div style="display:flex;justify-content:space-between;width:90%">
            <div>Month</div>
            <div>{{MonthHander(month.cronEvery)}}</div>
          </div>
        </template>
        <span slot="label"><i class="el-icon-date"></i> {{text.Month.name}}</span>
        <div class="tabBody">
          <el-row>
            <el-radio @change="changeHander"
                      v-model="month.cronEvery"
                      label="1">{{text.Month.every}}</el-radio>
          </el-row>
          <el-row>
            <el-radio @change="changeHander"
                      v-model="month.cronEvery"
                      label="2">{{text.Month.interval[0]}}
              <el-input-number size="small"
                               v-model="month.incrementIncrement"
                               :min="0"
                               :max="12"></el-input-number>
              {{text.Month.interval[1]}}
              <el-input-number size="small"
                               v-model="month.incrementStart"
                               :min="0"
                               :max="12"></el-input-number>
            </el-radio>
          </el-row>
          <el-row>
            <el-radio @change="changeHander"
                      class="long"
                      v-model="month.cronEvery"
                      label="3">{{text.Month.specific}}
              <el-select size="small"
                         multiple
                         v-model="month.specificSpecific">
                <el-option v-for="(val,index) in 12"
                           :key="index"
                           :label="val"
                           :value="val"></el-option>
              </el-select>
            </el-radio>
          </el-row>
          <el-row>
            <el-radio @change="changeHander"
                      v-model="month.cronEvery"
                      label="4">{{text.Month.cycle[0]}}
              <el-input-number size="small"
                               v-model="month.rangeStart"
                               :min="1"
                               :max="12"></el-input-number>
              {{text.Month.cycle[1]}}
              <el-input-number size="small"
                               v-model="month.rangeEnd"
                               :min="1"
                               :max="12"></el-input-number>
            </el-radio>
          </el-row>
        </div>
      </el-collapse-item>
      <el-collapse-item title="Year"
                        name="6">
        <template slot="title">
          <div style="display:flex;justify-content:space-between;width:90%">
            <div>Year</div>
            <div>{{YearHander(year.cronEvery)}}</div>
          </div>
        </template>
        <span slot="label"><i class="el-icon-date"></i> {{text.Year.name}}</span>
        <div class="tabBody">
          <el-row>
            <el-radio @change="changeHander"
                      v-model="year.cronEvery"
                      label="1">{{text.Year.every}}</el-radio>
          </el-row>
          <el-row>
            <el-radio @change="changeHander"
                      v-model="year.cronEvery"
                      label="2">{{text.Year.interval[0]}}
              <el-input-number size="small"
                               v-model="year.incrementIncrement"
                               :min="1"
                               :max="99"></el-input-number>
              {{text.Year.interval[1]}}
              <el-input-number size="small"
                               v-model="year.incrementStart"
                               :min="2018"
                               :max="2118"></el-input-number>
            </el-radio>
          </el-row>
          <el-row>
            <el-radio @change="changeHander"
                      class="long"
                      v-model="year.cronEvery"
                      label="3">{{text.Year.specific}}
              <el-select size="small"
                         filterable
                         multiple
                         v-model="year.specificSpecific">
                <el-option v-for="(val,index) in 100"
                           :key="index"
                           :label="2017+val"
                           :value="2017+val"></el-option>
              </el-select>
            </el-radio>
          </el-row>
          <el-row>
            <el-radio @change="changeHander"
                      v-model="year.cronEvery"
                      label="4">{{text.Year.cycle[0]}}
              <el-input-number size="small"
                               v-model="year.rangeStart"
                               :min="2018"
                               :max="2118"></el-input-number>
              {{text.Year.cycle[1]}}
              <el-input-number size="small"
                               v-model="year.rangeEnd"
                               :min="2018"
                               :max="2118"></el-input-number>
            </el-radio>
          </el-row>
        </div>
      </el-collapse-item>
    </el-collapse>
    <div class="bottom">
      <span class="value"
            style="margin-right:10px">{{this.cron}}</span>
      <el-button type="primary"
                 size="mini"
                 @click="change">{{text.Save}}</el-button>
      <el-button type="primary"
                 size="mini"
                 @click="close">{{text.Close}}</el-button>
    </div>
  </div>
</template>
<script>
import Language from './language/index'
import cronstrue from 'cronstrue'
export default {
  name: 'VueCron',
  props: ['data', 'i18n', 'cronData', 'model', 'shareDashboard'],
  data () {
    return {
      keys: 0,
      activeNames: ['2'],
      second: {
        cronEvery: '',
        incrementStart: '3',
        incrementIncrement: '5',
        rangeStart: '',
        rangeEnd: '',
        specificSpecific: []
      },
      minute: {
        cronEvery: '',
        incrementStart: '3',
        incrementIncrement: '5',
        rangeStart: '',
        rangeEnd: '',
        specificSpecific: []
      },
      hour: {
        cronEvery: '',
        incrementStart: '3',
        incrementIncrement: '5',
        rangeStart: '',
        rangeEnd: '',
        specificSpecific: []
      },
      day: {
        cronEvery: '',
        incrementStart: '1',
        incrementIncrement: '1',
        rangeStart: '',
        rangeEnd: '',
        specificSpecific: [],
        cronLastSpecificDomDay: 1,
        cronDaysBeforeEomMinus: '',
        cronDaysNearestWeekday: ''
      },
      week: {
        cronEvery: '',
        incrementStart: '1',
        incrementIncrement: '1',
        specificSpecific: [],
        cronNthDayDay: 1,
        cronNthDayNth: '1'
      },
      month: {
        cronEvery: '',
        incrementStart: '3',
        incrementIncrement: '5',
        rangeStart: '',
        rangeEnd: '',
        specificSpecific: []
      },
      year: {
        cronEvery: '',
        incrementStart: '2017',
        incrementIncrement: '1',
        rangeStart: '',
        rangeEnd: '',
        specificSpecific: []
      },
      output: {
        second: '',
        minute: '',
        hour: '',
        day: '',
        month: '',
        Week: '',
        year: ''
      }
    }
  },
  watch: {
    data () {
      this.rest(this.$data)
    }
  },
  computed: {
    text () {
      return Language[this.i18n || 'cn']
    },
    secondsText () {
      let seconds = ''
      let cronEvery = this.second.cronEvery
      switch (cronEvery.toString()) {
        case '1':
          seconds = '*'
          break
        case '2':
          seconds = this.second.incrementStart + '/' + this.second.incrementIncrement
          break
        case '3':
          this.second.specificSpecific.map(val => {
            seconds += val + ','
          })
          seconds = seconds.slice(0, -1)
          break
        case '4':
          seconds = this.second.rangeStart + '-' + this.second.rangeEnd
          break
      }
      return seconds
    },
    minutesText () {
      let minutes = ''
      let cronEvery = this.minute.cronEvery
      switch (cronEvery.toString()) {
        case '1':
          minutes = '*'
          break
        case '2':
          minutes = this.minute.incrementStart + '/' + this.minute.incrementIncrement
          break
        case '3':
          this.minute.specificSpecific.map(val => {
            minutes += val + ','
          })
          minutes = minutes.slice(0, -1)
          break
        case '4':
          minutes = this.minute.rangeStart + '-' + this.minute.rangeEnd
          break
      }
      return minutes
    },
    hoursText () {
      let hours = ''
      let cronEvery = this.hour.cronEvery
      switch (cronEvery.toString()) {
        case '1':
          hours = '*'
          break
        case '2':
          hours = this.hour.incrementStart + '/' + this.hour.incrementIncrement
          break
        case '3':
          this.hour.specificSpecific.map(val => {
            hours += val + ','
          })
          hours = hours.slice(0, -1)
          break
        case '4':
          hours = this.hour.rangeStart + '-' + this.hour.rangeEnd
          break
      }
      return hours
    },
    daysText () {
      let days = ''
      let cronEvery = this.day.cronEvery
      switch (cronEvery.toString()) {
        case '1':
          break
        case '2':
        case '4':
        case '11':
          days = '?'
          break
        case '3':
          days = this.day.incrementStart + '/' + this.day.incrementIncrement
          break
        case '5':
          this.day.specificSpecific.map(val => {
            days += val + ','
          })
          days = days.slice(0, -1)
          break
        case '6':
          days = 'L'
          break
        case '7':
          days = 'LW'
          break
        case '8':
          days = this.day.cronLastSpecificDomDay + 'L'
          break
        case '9':
          days = 'L-' + this.day.cronDaysBeforeEomMinus
          break
        case '10':
          days = this.day.cronDaysNearestWeekday + 'W'
          break
      }
      return days
    },
    weeksText () {
      let weeks = ''
      let cronEvery = this.day.cronEvery
      switch (cronEvery.toString()) {
        case '1':
        case '3':
        case '5':
          weeks = '?'
          break
        case '2':
          weeks = this.week.incrementStart + '/' + this.week.incrementIncrement
          break
        case '4':
          this.week.specificSpecific.map(val => {
            weeks += val + ','
          })
          weeks = weeks.slice(0, -1)
          break
        case '6':
        case '7':
        case '8':
        case '9':
        case '10':
          weeks = '?'
          break
        case '11':
          weeks = this.week.cronNthDayDay + '#' + this.week.cronNthDayNth
          break
      }
      return weeks
    },
    monthsText () {
      let months = ''
      let cronEvery = this.month.cronEvery
      switch (cronEvery.toString()) {
        case '1':
          months = '*'
          break
        case '2':
          months = this.month.incrementStart + '/' + this.month.incrementIncrement
          break
        case '3':
          this.month.specificSpecific.map(val => {
            months += val + ','
          })
          months = months.slice(0, -1)
          break
        case '4':
          months = this.month.rangeStart + '-' + this.month.rangeEnd
          break
      }
      return months
    },
    yearsText () {
      let years = ''
      let cronEvery = this.year.cronEvery
      switch (cronEvery.toString()) {
        case '1':
          years = '*'
          break
        case '2':
          years = this.year.incrementStart + '/' + this.year.incrementIncrement
          break
        case '3':
          this.year.specificSpecific.map(val => {
            years += val + ','
          })
          years = years.slice(0, -1)
          break
        case '4':
          years = this.year.rangeStart + '-' + this.year.rangeEnd
          break
      }
      return years
    },
    cron () {
      return `0 ${this.minutesText || '*'} ${this.hoursText || '*'} ${this.daysText || '*'} ${this.monthsText || '*'} ${this.weeksText || '?'} ${this.yearsText || '*'}`
    }
  },
  methods: {
    showCRONDescription (val) {
      return cronstrue.toString(val)
    },
    changeHander () {
      this.$forceUpdate()
    },
    MinutesHander (id) {
      let temp = ''
      switch (id) {
        case '1':
          temp = this.text.Minutes.every
          break
        case '2':
          temp = `Every ${this.minute.incrementIncrement} minute(s) starting at minute ${this.minute.incrementStart}`
          break
        case '3':
          temp = `Specific minute ${this.minute.specificSpecific}`
          break
        case '4':
          temp = `Every minute between minute ${this.minute.rangeStart} and minute ${this.minute.rangeEnd}`
          break
      }
      return temp
    },
    HoursHander (id) {
      let temp = ''
      switch (id) {
        case '1':
          temp = this.text.Hours.every
          break
        case '2':
          temp = `Every ${this.hour.incrementIncrement} hour(s) starting at hour ${this.hour.incrementStart}`
          break
        case '3':
          temp = `Specific hour ${this.hour.specificSpecific}`
          break
        case '4':
          temp = `Every hour between hour ${this.hour.rangeStart} and hour ${this.hour.rangeEnd}`
          break
      }
      return temp
    },
    MonthHander (id) {
      let temp = ''
      switch (id) {
        case '1':
          temp = this.text.Month.every
          break
        case '2':
          temp = `Every ${this.month.incrementIncrement} month(s) starting in ${this.month.incrementStart}`
          break
        case '3':
          temp = `Specific month ${this.month.specificSpecific}`
          break
        case '4':
          temp = `Every month between ${this.month.rangeStart} and ${this.month.rangeEnd}`
          break
      }
      return temp
    },
    YearHander (id) {
      let temp = ''
      switch (id) {
        case '1':
          temp = this.text.Year.every
          break
        case '2':
          temp = `Every ${this.year.incrementIncrement} year(s) starting in ${this.year.incrementStart}`
          break
        case '3':
          temp = `Specific year ${this.year.specificSpecific}`
          break
        case '4':
          temp = `Every year between ${this.year.rangeStart} and ${this.year.rangeEnd}`
          break
      }
      return temp
    },
    dayHander (id) {
      let temp = ''
      switch (id) {
        case '1':
          temp = this.text.Day.every
          break
        case '2':
          temp = `Every ${this.week.incrementIncrement} day(s) starting on ${this.week.incrementStart}`
          break
        case '3':
          temp = `Every ${this.day.incrementIncrement} day(s) starting at the ${this.day.incrementStart} of the month`
          break
        case '4':
          temp = `Specific day of week ${this.week.specificSpecific}`
          break
        case '5':
          temp = `Specific day of month ${this.day.specificSpecific}`
          break
        case '6':
          temp = `On the last day of the month`
          break
        case '7':
          temp = `On the weeekday of the month`
          break
        case '8':
          temp = `On the last ${this.day.cronLastSpecificDomDay} of the month`
          break
        case '9':
          temp = `${this.day.cronDaysBeforeEomMinus} day(s) before the end of the month`
          break
        case '10':
          temp = `Nearest weekday (Monday to Friday) to the ${this.day.cronDaysNearestWeekday} of the month`
          break
        case '11':
          temp = `On the ${this.week.cronNthDayNth} ${this.week.cronNthDayDay} of the month`
          break
      }
      return temp
    },
    getValue () {
      if(this.shareDashboard === 'shareDashboard') {
       return this.cron === '0 * * * * ? *' ? '' : this.cron
      } else {
       return this.cron
      }
    },
    change () {
      if (this.shareDashboard === 'shareDashboard' && this.minute.specificSpecific.length <= 0) {
        this.$message.error('Please fill in the required fields 【 Specific minute 】')
      } else {
        this.$emit('change', {
          cron: this.getValue(),
          activeNames: this.activeNames,
          minute: this.minute,
          hour: this.hour,
          day: this.day,
          week: this.week,
          month: this.month,
          year: this.year
        })
        this.close()
      }
    },
    close () {
      this.$emit('close')
    },
    init () {
      if (this.shareDashboard) {
        this.$nextTick(() => {
          this.minute.cronEvery = '3'
          this.keys++
        })
      }
      if (this.cronData) {
        let temp = JSON.parse(JSON.stringify(this.cronData))
        this.activeNames = temp.activeNames
        this.minute = temp.minute
        this.hour = temp.hour
        this.day = temp.day
        this.week = temp.week
        this.month = temp.month
        this.year = temp.year
      } else {
        Object.assign(this.$data, this.$options.data())
      }
    },
    rest (data) {
      for (let i in data) {
        if (data[i] instanceof Object) {
          this.rest(data[i])
        } else {
          switch (typeof data[i]) {
            case 'object': data[i] = []; break
            case 'string': data[i] = ''; break
          }
        }
      }
    }
  },
  mounted () {
  }

}</script>
<style lang="scss" scoped>
    #changeContab{
        .language{
            position: absolute;
            right: 25px;
            z-index: 1;
        }
        .el-tabs{
            box-shadow: none;
        }
        .tabBody{
            .el-row{
                margin: 10px 0;
                .long{
                    .el-select{
                        width:350px;
                    }
                }
                .el-input-number{
                    width: 110px;
                }
            }
        }
        .bottom{
            width: 100%;
            text-align: center;
            margin-top: 5px;
            position: relative;
            .value{
                font-size: 18px;
                vertical-align: middle;
            }
        }
    }
</style>
